<template>
	<el-row>
		<el-col :span="4">
			<div class="grid-content header-title">智能审核系统</div>
		</el-col>
		<el-col :span="2" :offset="15">
			<div class="grid-content header-help">
				<i class="el-icon-question"></i>
				帮助
			</div>
		</el-col>
		<el-col :span="3">
			<div class="grid-content bg-purple">
				<el-menu height='50px'
						:default-active="activeIndex2"
						class="el-menu-demo"
						mode="horizontal"
						@select="handleSelect"
						background-color="#0F212E"
				    text-color="#fff"
						active-text-color="#fff">
					<el-submenu index="2">
						<template slot="title">
							<el-col :span="10">
									<img class="header-photo" :src="headerImgUrl" alt="">
							</el-col>
							用户名
						</template>
						<el-menu-item index="2-1">个人信息</el-menu-item>
						<el-menu-item index="2-2">设置</el-menu-item>
						<el-menu-item index="2-3">退出</el-menu-item>
					</el-submenu>
				</el-menu>
			</div>
		</el-col>
	</el-row>
</template>

<script>
export default {
  name: 'navHeader',
  data () {
    return {
      activeIndex2: '1',
      headerImgUrl: require('../../assets/image/header.jpg')
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    }
  }

}
</script>

<style>
	
</style>
